
body { font-size: 14px; font-family: "microsoft yahei"; color: #333; background:#ffffff; }
input, select, textarea, button { font-size:14px; font-weight:inherit; vertical-align:middle; line-height:normal; outline:none; border:none; font-family: "microsoft yahei"; }
h1, h2, h3, h4, h5, h6, i, em, tr, th{ font-style:normal; font-weight:normal;}
img { border: 0; vertical-align:middle; }
ul, li, ol, dl, dt {list-style: none;}
a { text-decoration: none; outline: none; color:#333;}
a:hover{ color:#e63180;}
* { padding: 0px; margin: 0px; }
.fl { float: left; }
.fr { float: right; }
.clear:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clear { zoom: 1 }
.mag { max-width:1200px; margin: 0 auto; }
table { border-collapse:collapse; border-spacing:0;}
html { overflow-y: scroll; }

.sec{width: 100%}



.i-head{float:left;width: 100%;height: 70px;background-color: #2773ff;color: #ffffff;font-size:16px;}
.i-head-logo{width: 160px;height: 70px;background: url("/web/home/images/logo1.png") no-repeat center center;float: left}
.i-head-list{width: 670px;height: 70px;float:left;margin-left:100px;}
.i-head-list li{position: relative;width: 20%;float:left;text-align: center;line-height: 70px;cursor: pointer;}
.i-head-list li::after{
    content: '';
    position: absolute;
    width: 80%;
    background: #fff;
    bottom: 0;
    left: 10%;
    height: 5px;
    opacity: 0;
    transition: all .3s;
}
.i-head-list li:hover::after{
    opacity: 1;
}
.i-head-list li a{
    display: inline-block;
    color: #FFF;
}
.i-head-qr{width: 270px;height: 70px;float:left;line-height: 70px}
.i-head-qr li{width: 40%;margin:0 0 0 10%;float: right;text-align: right;position: relative;}
.i-head-qr li span{padding: 5px 15px;border: 1px solid #FFF;border-radius: 17px;cursor: pointer}
.i-qr{width: 240px;height: 240px;position: absolute;top: 120px;left:-60px;background-color: rgba(243,251,253,.2);border-radius: 10px;z-index: -999;transition: top .3s;}
.i-qr-back{padding: 10px;margin: 10px;width: 200px;height:200px;background: #FFF;border-radius: 10px;position: relative}
.i-qr-back img{width: 200px;height: 200px}
.i-qr:after{content: '';position: absolute;bottom: 240px;left: 150px;border-bottom: 10px solid rgba(243,251,253,.2);border-left:10px solid transparent;border-right:10px solid transparent;width: 0;height: 0}
.i-qr-back:after{content: '';position: absolute;bottom: 220px;left: 140px;border-bottom: 10px solid #FFF;border-left:10px solid transparent;border-right:10px solid transparent;width: 0;height: 0}

.i-head-qr li span:hover~.i-qr{z-index: 9999;top:90px;}



section{float: left;}
.banners{
    width: 100%;
}
.banners img{
    width: 100%;
}
.main-product{
    width: 100%;
    background-color: #FFF;
    padding: 30px 0;
}
.product-title{
    padding: 40px 0;
    color: #2772ff;
}
.product-title span{
    display: inline-block;
    width: 100%;
    text-align: center;
}
.product-title span:first-child{
    font-size: 30px;
    line-height: 50px;
    letter-spacing: 2px;
}
.product-title span:last-child{
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 4px;
}
.product-list{
    width: 100%;
}
.product-list li{
    width: 25%;
    float: left;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.product-list-head{
    line-height: 80px;
    color: #2772ff;
    letter-spacing: 2px;
    font-size: 22px;
    transition: all .2s;
    position: relative;
    top: 0;
}
.product-list-text{
    font-size: 14px;
    color: #818283;
    padding: 0 40px;
    line-height: 25px;
    transition: all .3s;
    position: relative;
    top: 0;
}
.product-list-img{
    width: 100%;
    padding: 40px 0 80px;
    text-align: center;
    transition: all .6s;
    position: relative;
    top: 0;
}
.product-list li:hover .product-list-head,.product-list li:hover .product-list-text{
    top: 150px;
}
.product-list li:hover .product-list-img{
    top: -150px;
}
.main-regard{
    width: 100%;
    background-color: #f8f9ff;
    padding: 30px 0 100px;
}
.main-regard-text{
    padding: 0 100px;
    font-size: 14px;
    color: #818283;
    line-height: 30px;
    text-align: center;
    word-break: keep-all;
}





.foot{
    width: 100%;
    height: 90px;
    float:left;
    position: relative;
}
.foot-img{
    width: 100%;
    height: 90px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -99;
}
.i-foot-logo{width: 160px;height: 70px;padding:10px 0;background: url("/web/home/images/logo1.png") no-repeat center center;float: left}
.i-foot-text{
    width: 1040px;
    float: left;
    height: 90px;
    line-height: 90px;
    text-align: right;
    font-size: 16px;
    color: #FFF;
}
.i-foot-text span{
    padding: 0 50px;
}
.i-foot-text span:last-of-type{
	padding: 0 0 0 50px;
}







